<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <style>
      #Input {
        background-image: url("images/searchicon.png");
        background-position: 10px 12px;
        background-repeat: no-repeat;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
      }

      #MyTable {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #ddd;
        font-size: 18px;
      }
      #MyTable th,
      #MyTable td {
        text-align: left;
        padding: 12px;
      }

      #MyTable tr {
        border-bottom: 1px solid #ddd;
      }

      #MyTable tr.header,
      #MyTable tr:hover {
        background-color: #f1f1f1;
      }

      a {
        text-decoration: none;
        color: black;
      }
    </style>
  </head>
  <body>
    <input type="text" id="Input" placeholder="搜索公司..." />
    <table id="MyTable">
      <tr class="header">
        <th style="width: 60%">公司名称</th>
        <th style="width: 40%">国家</th>
      </tr>
      <tr>
        <td onclick="sortTable(0)"><a href="#">Alfreds Futterkiste</a></td>
        <td onclick="sortTable(1)"><a href="#">Germany</a></td>
      </tr>
      <tr>
        <td onclick="sortTable(0)"><a href="#">Berglunds snabbkop</a></td>
        <td onclick="sortTable(1)"><a href="#">Sweden</a></td>
      </tr>
      <tr>
        <td onclick="sortTable(0)"><a href="#">Island Trading</a></td>
        <td onclick="sortTable(1)"><a href="#">UK</a></td>
      </tr>
      <tr>
        <td onclick="sortTable(0)"><a href="#">Koniglich Essen</a></td>
        <td onclick="sortTable(1)"><a href="#">Germany</a></td>
      </tr>
    </table>

    <script>
      function search() {
        let input = document.getElementById("Input");
        let filter = input.value.toUpperCase();
        let table = document.getElementById("MyTable");
        let tr = table.querySelectorAll("tr");

        for (let i = 0; i < tr.length; i++) {
          let td = tr[i].querySelectorAll("td")[0];
          if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = ""; // to recover the display of elements
            } else {
              tr[i].style.display = "none"; // to hide elements
            }
          }
        }
      }
      let input = document.getElementById("Input");
      input.addEventListener("input", search);

      function sortTable(n) {
        var table,
          rows,
          switching,
          i,
          x,
          y,
          shouldSwitch,
          dir,
          switchcount = 0;
        table = document.getElementById("MyTable");
        switching = true;

        dir = "asc";

        while (switching) {
          switching = false;
          rows = table.rows;

          for (i = 1; i < rows.length - 1; i++) {
            shouldSwitch = false;

            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];

            if (dir == "asc") {
              if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
              }
            } else if (dir == "desc") {
              if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
              }
            }
          }
          if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;

            switchcount++;
          } else {
            if (switchcount == 0 && dir == "asc") {
              dir = "desc";
              switching = true;
            }
          }
        }
      }
    </script>
  </body>
</html>